<template>
	<div id="app">
		<div @click="goBack" class="back">
			<img :src="back_img">
		</div>
		<div @click="pauseBGM" class="music">
			<img :src="music_img" :class="{'music-ani':musicPlay}">
		</div>
		<!-- <div class="screen-mask">
			<div class="screen-mask-img"></div> -->
		<!-- <img class="screen-mask-img"/> -->
		<!-- </div> -->
		<!-- <div v-if="show_screen_mask" class="screen-mask"></div>
		<img v-if="show_screen_mask" class="screen-mask-img" :src="screen_img" /> -->
		<audio style="display:none; height: 0" ref="audio" id="audio" volume='0.2' preload="auto" loop="loop"></audio>
		<router-view />
	</div>
</template>
<script>
	let audioPlay = ''
	import {
		mapState
	} from "vuex";
	const sha1 = require('sha1');
	export default {
		data() {
			return {
				musicPlay: true,
				back_img: 'http://h5static.weiyoho.com/assets/back.png',
				music_img: 'http://h5static.weiyoho.com/assets/music.png',
				bgmMP3: require('./static/BGM5.mp3'),
				// show_screen_mask: false,
				screen_img: require('./assets/screen.png'),
			};
		},
		computed: {
			...mapState({
				downloadImg: state => state.downloadImg,
				count: state => state.count,
			})
		},
		mounted() {
			// 监听resize方法
			// window.addEventListener("resize", this.renderResize, false)
			this.Play()

			this.$http.get('https://wx.cignacmb.com/wxweb/getJsApiTicket', {
				params: {
					accountId: 'gh_6c17146316ec'
				}
			}).then((res) => {
				console.log('res', res)
				let jsapi_ticket = res.data.data
				let noncestr = 'h5shu'
				let timestamp = new Date().getTime()
				let url = location.href.split('#')[0]
				// let url = 'http://h5shu.weiyoho.com/h5shu/'
				let string1 =
					`jsapi_ticket=${res.data.data}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`
				let signature = sha1(string1)
				console.log("signature:", signature)
				wx.config({
					debug: false,
					appId: 'wx8d188615510c9093',
					timestamp: timestamp,
					nonceStr: noncestr,
					signature: signature,
					jsApiList: [
						'showOptionMenu',
						'onMenuShareTimeline',
						'onMenuShareAppMessage'
					]
				});

				setTimeout(function () {
					wx.ready(function () {
						wx.showOptionMenu();
						//“分享到朋友圈”
						wx.onMenuShareTimeline({
							title: '祝福千千万 鼠你不一样',
							link: 'http://h5shu.weiyoho.com/h5shu/',
							imgUrl: 'http://h5static.weiyoho.com/assets/theme/mouse.png',
							success: function () {
								console.log("分享成功");
							},
							cancel: function () {
								console.log("分享失败");
							}
						});
						// “分享给朋友”
						wx.onMenuShareAppMessage({
							title: '祝福千千万 鼠你不一样',
							desc: '立即定制，专“鼠”于你的新春祝福！',
							link: 'http://h5shu.weiyoho.com/h5shu/',
							imgUrl: 'http://h5static.weiyoho.com/assets/theme/mouse.png',
							type: 'link', // 分享类型，当前是链接link
							success: function () {
								console.log("分享成功")
							},
							cancel: function () {
								console.log("分享失败")
							}
						});
					});
				}, 500)
			})
		},
		methods: {
			// renderResize() {
			// 	// 判断横竖屏
			// 	let width = document.documentElement.clientWidth
			// 	let height = document.documentElement.clientHeight
			// 	if (width > height) {
			// 		this.show_screen_mask = true
			// 	} else {
			// 		this.show_screen_mask = false
			// 	}
			// 	// 做页面适配
			// 	// 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
			// },
			goBack() {
				// console.log(this.page)
				// this.$store.commit("updateDownloadImg", '');
				console.log("this.$route.path:", this.$route.path)
				console.log("this.$router.currentRoute.path", this.$router.currentRoute.path)
				let path = this.$route.path
				switch (path) {
					case '/choice':
						this.$router.replace('/')
						break;
					case '/picture':
						this.$router.replace('/choice')
						break;
					case '/calendar':
						this.$router.replace('/choice')
						break;
					case '/papercut':
						this.$router.replace('/choice')
						break;
					case '/paperBlessing':
						this.$router.replace('/papercut')
						break;
					case '/blessing':
						this.$router.replace('/picture')
						break;
					case '/calendarBlessing':
						this.$router.replace('/calendar')
						break;
					case '/share':
						this.$router.replace('/choice')
						break;
				}
				// this.$router.go(-2);
			},
			pauseBGM() {
				if (audioPlay.muted == false) {
					audioPlay.muted = true
					this.musicPlay = false
				} else {
					audioPlay.muted = false
					this.musicPlay = true
				}
			},
			Play() {
				audioPlay = this.$refs.audio;
				audioPlay.src = this.bgmMP3
				if (window.WeixinJSBridge) {
					window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
						// this.$refs.audio.load()
						setTimeout(() => {
							audioPlay.play()
							audioPlay.onended = function () {
								audioPlay.play();
							}
							this.musicPlay = true
						}, 300)
					})
				} else {
					document.addEventListener('WeixinJSBridgeReady', () => {
						window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
							// this.$refs.audio.load()
							setTimeout(() => {
								audioPlay.play()
								this.musicPlay = true
							}, 300)
						})
					}, false)
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	#app {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#nav {
		padding: 30px;

		a {
			font-weight: bold;
			color: #2c3e50;

			&.router-link-exact-active {
				color: #42b983;
			}
		}
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		padding: 20px;
		z-index: 999;

		img {
			width: 30px;
			height: 30px;
		}
	}

	// @media all and (orientation : landscape) { 
	// /*横屏时代码*/
	// 	.screen-mask {
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		position: absolute;
	// 		width: 100vw;
	// 		height: 100vh;
	// 		left: 0;
	// 		top: 0;
	// 		right: 0;
	// 		bottom: 0;
	// 		opacity: 0.9;
	// 		background-color: #000000;
	// 		z-index: 9999;
	// 	}

	// 	.screen-mask-img {
	// 		background: url('./assets/screen.png') no-repeat;
	// 		background-size: 150px 100px;
	// 		position: absolute;
	// 		width: 150px;
	// 		height: 100px;
	// 		transform: rotate(-90deg);
	// 		// left: 0;
	// 		// top: 30vh;
	// 		z-index: 10000;
	// 	}
	// }

	.music {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
		padding: 20px;

		img {
			width: 30px;
			height: 30px;
		}
	}

	.music-ani {
		-webkit-animation: animal 1.5s infinite linear;
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}

	@-webkit-keyframes animal {
		0% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
		}
	}
</style>